<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_组件-注册局部组件</title>
  <!-- 
  在 Vue 3 中，局部组件是指在特定组件内部注册和使用的组件。与全局组件不同，局部组件仅在其父组件的模板中可用，这有助于提高代码的可维护性和减少命名冲突。
  1. 局部组件的注册
  局部组件的注册通常在父组件的  `components`  选项中进行。基本语法如下：
  <template>
    <div>
      <MyLocalComponent />
    </div>
  </template>

  <script>
  import MyLocalComponent from './MyLocalComponent.vue'; // 导入局部组件

  export default {
    components: {
      MyLocalComponent, // 注册局部组件
    },
  };
  </script>
  在这个例子中， `MyLocalComponent`  被注册为局部组件，只能在当前组件中使用。

  2. 使用局部组件
  一旦局部组件被注册，就可以在其父组件的模板中使用。例如：
  <template>
    <div>
      <h1>欢迎使用局部组件!</h1>
      <MyLocalComponent />
    </div>
  </template>
  3. 组件名称
  局部组件的名称通常使用大写字母开头的 PascalCase 风格或用短横线分隔的小写字母（kebab-case）风格：

  - PascalCase:  `<MyLocalComponent />` 
  - Kebab-case:  `<my-local-component />` 

  4. 适用场景
  - 特定功能的组件：适合仅在某个特定组件中使用的功能组件，如表单输入、按钮等。
  - 减少命名冲突：局部组件可以避免与全局组件或其他局部组件的命名冲突。

  5. 注意事项
  - 导入组件：在使用局部组件之前，必须先导入它。
  - 性能考虑：局部组件仅在需要的地方注册，能够优化性能和内存使用。
  - 可维护性：局部组件使得代码结构更清晰，易于管理和维护。

  6. 总结
  - 局部组件注册：在父组件的  `components`  选项中注册局部组件。
  - 使用范围：局部组件仅在其父组件中可用，增强了模块化。
  - 命名规则：遵循 PascalCase 或 kebab-case 命名风格。
  - 适用场景：适合特定功能组件和减少命名冲突。
  - 注意事项：确保导入组件并考虑性能和可维护性。
  -->
  <style>
    .product {
      background-color: orange;
    }
  </style>
</head>
<body>

  <div id="app">
    <home-nav></home-nav>

    <!-- <product-item></product-item> -->
  </div>

  <template id="nav">
    <h2>局部组件注册</h2>
    <p>我是home-nav的组件 - start</p>
    <product-item></product-item>
    <p>我是home-nav的组件 - end</p>
  </template>

  <template id="product">
    <div class="product">
      <h2>{{ product.name }}</h2>
      <div>商品价格: <span>¥{{ product.price }}</span></div>
      <p>商品描述信息, 5999.9秒杀</p>
      <button @click="favarItem">收藏</button>
    </div>
  </template>
  
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, reactive } = Vue;

    const ProductItem = {
      template: "#product",
      setup() {
        const product = reactive({
          name: "iPhone 14",
          price: 5999.9,
        });

        const favarItem = () => {
          console.log("收藏商品");
        };

        return {
          product,
          favarItem,
        };
      }
    };

    const app = createApp({
      components: {
        HomeNav: {
          template: "#nav",
          components: {
            ProductItem, // 注册局部组件
          }
        }
      }
    })


    app.mount('#app');



  </script>
  
</body>
</html>